<template>
  <div>
    <div class="router-content">
      <div style="width: 600px; margin: 80px auto 0 auto">
        <el-form
          label-width="120px"
          :model="formModel"
          :rules="formRules"
          ref="formModel"
        >
          <el-form-item label="用户名" style="margin-top: 20px"
            >{{ $store.state.userInfo.username }}
          </el-form-item>
          <el-form-item
            label="请输入旧密码"
            style="margin-top: 20px"
            prop="oldPassword"
          >
            <el-input
              maxlength="16"
              placeholder="请输入旧密码"
              v-model="formModel.oldPassword"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="请输入新密码"
            style="margin-top: 20px"
            prop="newPassword"
          >
            <el-input
              maxlength="16"
              placeholder="请输入新密码"
              v-model="formModel.newPassword"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="确认密码"
            style="margin-top: 20px"
            prop="confirmPassword"
          >
            <el-input
              maxlength="16"
              placeholder="请再次确认新密码"
              v-model="formModel.confirmPassword"
            ></el-input>
          </el-form-item>
          <el-form-item style="margin-top: 20px">
            <el-button
              type="primary"
              @click="submitForm('formModel')"
              :loading="$store.state.subLoading"
              >提交</el-button
            >
            <el-button @click="closeForm('formModel')">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import api from "@/api/user.js";
export default {
  data() {
    return {
      formModel: {
        oldPassword: "",
        newPassword: "",
        confirmPassword: "",
      },
      formRules: {
        oldPassword: [
          {
            required: true,
            message: "请输入旧密码",
            trigger: "blur",
          },
          {
            pattern: /^\w{8,16}$/,
            message: "请输入8-16位的密码",
            trigger: "blur",
          },
        ],

        newPassword: [
          { required: true, message: "请输入新密码", trigger: "blur" },
          {
            pattern: /^\w{8,16}$/,
            message: "密码必须是8-16位数字，字母的组合，支持纯数字和纯字母",
            trigger: "blur",
          },
          {
            validator: (rule, value, callback) => {
              if (this.formModel.newPassword === "") {
                return callback("请输入登录密码");
              } else if (this.formModel.oldPassword === value) {
                return callback("新密码不能与旧密码相同");
              } else if (this.formModel.confirmPassword !== "") {
                this.$refs["formModel"].validateField("confirmPassword");
              }
              callback();
            },
            trigger: "blur",
          },
        ],
        confirmPassword: [
          { required: true, message: "请输入确认密码", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              if (this.formModel.newPassword != value) {
                return callback("两次输入密码不一致");
              }
              return callback();
            },
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          api.modifyPassword(this.formModel).then((res) => {
              console.log(res);
            this.$message.success("修改密码成功");
            this.$refs[formName].resetFields();
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    closeForm(formName) {
      this.$refs[formName].resetFields();
      this.$router.go(-1);
    },
  },
};
</script>
<style lang="less" scope>
// .el-form-item {
//   margin: 0;
// }
.btn {
  margin-top: 10px;
  text-align: left;
  padding-left: 120px;
  button {
    width: 120px;
  }
}
</style>
